<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="5" style="margin-bottom: 10px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>个人信息</span>
          </div>
          <div>
            <div style="text-align: center">
              <el-upload
                :show-file-list="false"
                :on-success="handleSuccess"
                :on-error="handleError"
                :headers="headers"
                :action="updateAvatarApi"
                class="avatar-uploader"
              >
                <img :src="user.avatar" title="点击上传头像" class="avatar" />
              </el-upload>
            </div>
            <ul class="user-info">
              <li>
                <svg-icon icon-class="user1" />用户名称
                <div class="user-right">{{ user.userName }}</div>
              </li>
              <li>
                <svg-icon icon-class="user1" />用户账号
                <div class="user-right">{{ user.account }}</div>
              </li>
              <li>
                <svg-icon icon-class="phone" />手机号码
                <div class="user-right">{{ user.phone }}</div>
              </li>
              <li>
                <svg-icon icon-class="email" />用户邮箱
                <div class="user-right">{{ user.account }}@e-elad.cn</div>
              </li>
              <li>
                <svg-icon icon-class="dept" />所属部门
                <div class="user-right">{{ user.department }}</div>
              </li>
              <!-- <li><svg-icon icon-class="date" /> 创建日期 <div class="user-right">{{ parseTime(user.createTime) }}</div></li> -->
              <li>
                <svg-icon icon-class="anq" />安全设置
                <div class="user-right">
                  <a @click="handleUpdate">修改密码</a>
                  <!-- <a @click="$refs.email.dialog = true">修改邮箱</a> -->
                </div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- <updateEmail ref="email" :email="user.email"/> -->
    <!--  <updatePass ref="pass"/> -->
    <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="100px"
        style="width: 500px; margin-left:50px;"
      >
        <el-form-item label="ID" prop="id" style="display: none">
          <el-input v-model="temp.sid" />
        </el-form-item>
       <!--  <el-form-item label="原密码" prop="password">
          <el-input v-model="temp.password" show-password />
        </el-form-item> -->
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="temp.newPassword" show-password />
        </el-form-item>
        <el-form-item label="确定密码" prop="doublePassword">
          <el-input v-model="temp.doublePassword" show-password />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">清空</el-button>
        <el-button type="primary" @click="updateData()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getUser, getToken } from '@/utils/ssoUtils' // get token from cookie
import store from '@/store'
import { userById, updatePassword } from '@/api/user'
import config from '@/utils/ssoConfig'
import api from '@/utils/api'

// sso环境信息
const ssoEnv =
  process.env.NODE_ENV === 'development' ? config.sso.dev : config.sso.pro

const TOKEN_KEY = ssoEnv.REQUEST_HEADER_TOKEN_KEY

export default {
  name: 'Center',
  // components: { updatePass, updateEmail },
  // mixins: [initData],
  data () {
    return {
      user: {},
      ico: 'el-icon-refresh',
      updateAvatarApi: api.updateAvatarApi,
      headers: {
        'sso_sessionid': ''
      },
      dialogFormVisible: false,
      temp: {
        sid: '',
        password: '',
        newPassword: '',
        doublePassword: ''
      },
      rules: {
        newPassword: [{ required: true, message: '新密码必填', trigger: 'change' }, { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }],
        doublePassword: [{ required: true, message: '确定密码必填', trigger: 'blur' }, { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }]
      }
    }
  },
  computed: {
  },
  created () {
    let token = getToken()
    this.headers[TOKEN_KEY] = token
    this.getUser()
  },
  methods: {
    getUser () {
      this.$store.dispatch('user/getInfo', getUser()).then(res => {
        this.user = res.result
      })
    },
    handleSuccess (response, file, fileList) {
      this.getUser()
      this.$notify({
        title: '头像修改成功',
        type: 'success',
        duration: 2500
      })
    },
    // 监听上传失败
    handleError (e, file, fileList) {
      const msg = JSON.parse(e.message)
      this.$notify({
        title: msg.message,
        type: 'error',
        duration: 2500
      })
    },
    refresh () {
      this.ico = 'el-icon-loading'
      this.$refs.log.init()
      setTimeout(() => {
        this.ico = 'el-icon-refresh'
      }, 300)
    },
    handleUpdate () {
      this.temp = Object.assign({}, {})
      this.temp.sid = this.user.id
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateData () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          let tempData = Object.assign({}, this.temp)

          if (tempData.newPassword != tempData.doublePassword) {
            this.$notify({
              title: '警告',
              message: '密码不一致',
              type: 'warning',
              duration: 2000
            })
            return
          }

          delete tempData.doublePassword

          updatePassword(tempData).then(() => {
            this.dialogFormVisible = false
            this.$notify({
              title: 'Success',
              message: '密码修改成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.avatar-uploader-icon {
  font-size: 28px;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

.avatar {
  width: 120px;
  height: 120px;
  display: block;
  border-radius: 50%;
}
.user-info {
  padding-left: 0px;
  list-style: none;
  li {
    border-bottom: 1px solid #f0f3f4;
    border-top: 1px solid #f0f3f4;
    padding: 11px 0px;
    font-size: 13px;
  }
  .user-right {
    float: right;

    a {
      color: #317ef3;
    }
  }
}
</style>
